﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>

    <script>
        $(function () {

            var $container = $('#main-container').masonry({
                itemSelector: '.main-item, .bulletin-board',
                columnWidth: 290
            });

            $(window).scroll(function () {
                if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    var $items = getItems();
                    // hide by default
                    $items.hide();
                    // append to container
                    $container.append($items);
                    $items.imagesLoaded().progress(function (imgLoad, image) {
                        // get item
                        // image is imagesLoaded class, not <img>
                        // <img> is image.img
                        var $item = $(image.img).parents('.item');
                        // un-hide item
                        $item.show();
                        // masonry does its thing
                        $container.masonry('appended', $item);
                    });
                }
            });

            $('#load-images').click(function () {
                var $items = getItems();
                // hide by default
                $items.hide();
                // append to container
                $container.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    // get item
                    // image is imagesLoaded class, not <img>
                    // <img> is image.img
                    var $item = $(image.img).parents('.item');
                    // un-hide item
                    $item.show();
                    // masonry does its thing
                    $container.masonry('appended', $item);
                });
            });

        });
    </script>
</body>
</html>
